<template>
  <div class="home-page">
    <header class="header">
      <div class="logo-container">
        <img src="https://via.placeholder.com/50x50" alt="平台Logo" class="logo">
        <h1>区块链公益捐赠透明化平台</h1>
      </div>
      <div class="user-actions">
        <button @click="handleUser" class="user-button">
          <i class="fas fa-user"></i> 个人中心
        </button>
        <button @click="handleLogout" class="logout-button">
          <i class="fas fa-sign-out-alt"></i> 退出登录
        </button>
      </div>
    </header>
    <main class="content">
      <div class="welcome-section">
        <div class="welcome-animation">
          <p>您已成功登录系统！</p>
          <p class="subtitle">让每一份爱心都有迹可循</p>
        </div>
      </div>
      <!-- 平台特色功能 -->
      <div class="platform-features">
        <h2 class="section-title">平台特色功能</h2>
        <div class="feature-cards">
          <div class="card" v-for="(feature, index) in features" :key="index">
            <div class="icon-container" @click="goto(feature.path)">
              <i :class="feature.icon"></i>
            </div>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
          </div>
        </div>
      </div>
<!-- 热门捐赠功能 -->
      <div class="project-section">
        <div class="section-header">
          <h2 class="section-title">热门捐赠项目</h2>
          <button class="more-projects" @click="HotProjects">
            <i class="fas fa-arrow-right"></i> 更多热门项目
          </button>
        </div>
        <!-- 项目集 -->
        <div class="project-grid">
          <div 
            class="project-card" 
            v-for="(project, index) in projects" 
            :key="index"
            @click="viewProjectDetail(project)"
          >
          <!--项目封面图片 -->
            <div class="project-image-container">
              <img :src="project.image" :alt="project.name" class="project-image">
              <div class="project-status" :class="`status-${project.status}`">
                {{ project.statusText }}
              </div>
            </div>
            <!--项目名字  -->
            <div class="project-info">
              <h3 class="project-name">{{ project.name }}</h3>
              <p class="project-description">{{ project.shortDescription }}</p>
              <div class="project-meta">
                <div class="progress-container">
                  <div class="progress-bar" :style="{width: project.progress + '%'}"></div>
                  <span class="progress-text">
                    已筹 {{ project.raised }} ETH / 目标 {{ project.goal }} ETH
                  </span>
                </div>
                <div class="donors-count">
                  <i class="fas fa-users"></i> {{ project.donors }} 位捐赠者
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 我参与的项目 -->
       <div class="project-section">
          <div class="section-header">
          <h2 class="section-title">我参与的项目</h2>
          <button class="more-projects" @click="goMyProject">
            <i class="fas fa-arrow-right"></i> 我的项目...
          </button>
        </div>
        <!-- 项目集合 -->
         <div class="project-grid">
          <div class="project-card" v-for="(Myproject , index ) in Myprojects" :key="index" @click="viewProjectDetail(Myproject)">
            <!--项目封面图片 -->
            <div class="project-image-container">
              <img :src="Myproject.image" :alt="Myproject.name" class="project-image">
              <div class="project-status" :class="`status-${Myproject.status}`">
                {{Myproject.statusText}}
              </div>
            </div>
            <!-- 项目名字 -->
             <div class="project-info">
              <h3 class="project-name">{{ Myproject.name }}</h3>
              <p class="project-descripition"> {{ Myproject.shortDescription }}</p>
              <!-- 项目介绍 -->
              <div class="project-meta">
                <div class="progress-container">
                  <!-- 进度 -->
                  <div class="progress-bar" :style="{width : Myproject.progress + '%'}"></div>
                  <span class="progress-test"> 已筹 {{ Myproject.raised}} ETH  /  目标  {{ Myproject.goal}}  ETH  </span>
                </div>
                <div class="donors-count">
                  <i class="fas fa-users"></i>{{ Myproject.donors }} 位捐赠者
                </div>
              </div>
             </div>
          </div>
         </div>
       </div>
      

    </main>

    <!-- <footer class="footer">
      <div class="footer-content">
        <div class="footer-section">
          <h3>关于我们</h3>
          <p>基于区块链技术的公益捐赠透明化平台，确保每一笔捐赠公开透明。</p>
        </div>
        <div class="footer-section">
          <h3>联系我们</h3>
          <p>邮箱: contact@blockchain-donation.org</p>
          <p>电话: 400-123-4567</p>
        </div>
        <div class="footer-section">
          <h3>关注我们</h3>
          <div class="social-icons">
            <i class="fab fa-weixin"></i>
            <i class="fab fa-weibo"></i>
            <i class="fab fa-github"></i>
          </div>
        </div>
      </div>
      <div class="copyright">
        © 2023 区块链公益捐赠平台 版权所有
      </div>
    </footer> -->
  </div>
</template>

<script setup>
import { ref, computed , onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { initWeb3, donate, getProjectInfo } from "E:/Vue3/vite-project/contracts/contract";


const router = useRouter()

const project = ref({});
const projectId = 0;

onMounted(async () => {
  await initWeb3();
  project.value = await getProjectInfo(projectId);
});

const handleDonate = async () => {
  await donate(projectId, "0.01");
};

// 平台特色数据
const features = ref([
  {
    icon: 'fas fa-hand-holding-heart',
    title: '透明捐赠',
    description: '区块链技术确保每笔捐赠都可以追溯',
    path:'/MyMessage'
  },
  {
    icon: 'fas fa-chart-line',
    title: '实时追踪',
    description: '实时查看捐赠资金流向和使用情况',
    path:'/MyTracking'
  },
  {
    icon: 'fas fa-shield-alt',
    title: '项目上链',
    description: '用户投票将捐赠项目实现上链',
    path:'/MySecurity'
  }
])

// 项目数据
const projects = ref([
  {
    id: 1,
    name: '乡村儿童教育计划',
    shortDescription: '为偏远地区儿童提供教育资源和学习环境改善',
    description: '该项目旨在为偏远地区的儿童提供优质的教育资源，包括建设学校、提供教材和培训教师等。通过区块链技术，捐赠者可以实时追踪资金使用情况。',
    image: 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
    goal: 50,
    raised: 32.5,
    progress: 65,
    donors: 128,
    status: 'active',
    statusText: '进行中',
    startDate: '2023-01-15',
    endDate: '2023-12-31'
  },
  {
    id: 2,
    name: '环保植树行动',
    shortDescription: '在荒漠化地区种植树木，改善生态环境',
    description: '该项目计划在西北荒漠化地区种植10万棵树，改善当地生态环境，防止土地进一步沙漠化。每棵树的位置和生长情况都将记录在区块链上。',
    image: 'https://images.unsplash.com/photo-1468276311594-df7cb65d8df6?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
    goal: 30,
    raised: 18.2,
    progress: 60.6,
    donors: 76,
    status: 'active',
    statusText: '进行中',
    startDate: '2023-03-01',
    endDate: '2023-11-30'
  },
  {
    id: 3,
    name: '贫困家庭医疗援助',
    shortDescription: '为贫困家庭提供基本医疗保障和重大疾病救助',
    description: '为贫困家庭提供基本医疗保障，包括常见病治疗和重大疾病救助。所有医疗支出都将记录在区块链上，确保资金使用透明。',
    image: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
    goal: 40,
    raised: 40,
    progress: 100,
    donors: 215,
    status: 'completed',
    statusText: '已完成',
    startDate: '2022-09-01',
    endDate: '2023-02-28'
  },
  {
    id: 4,
    name: '老人关爱计划',
    shortDescription: '为孤寡老人提供生活照料和精神关怀',
    description: '为社区孤寡老人提供日常生活照料、健康监测和精神关怀服务。志愿者服务时间和物资分配都将记录在区块链上。',
    image: 'https://images.unsplash.com/photo-1507679799987-c73779587ccf?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
    goal: 20,
    raised: 12.8,
    progress: 64,
    donors: 93,
    status: 'active',
    statusText: '进行中',
    startDate: '2023-04-15',
    endDate: '2023-10-31'
  },
  {
    id: 5,
    name: '灾区紧急救援',
    shortDescription: '为自然灾害受灾地区提供紧急救援物资',
    description: '为遭受自然灾害的地区提供食品、饮用水、药品等紧急救援物资。所有物资采购和分发记录都将上链保存。',
    image: 'https://images.unsplash.com/photo-1580207585200-8de37a6a2d9e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
    goal: 60,
    raised: 42.3,
    progress: 70.5,
    donors: 187,
    status: 'active',
    statusText: '进行中',
    startDate: '2023-05-10',
    endDate: '2023-08-31'
  },
  {
    id: 6,
    name: '残障人士就业支持',
    shortDescription: '为残障人士提供职业技能培训和就业机会',
    description: '为残障人士提供职业技能培训，并帮助他们寻找合适的就业机会。项目进展和资金使用情况都将实时更新在区块链上。',
    image: 'https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
    goal: 25,
    raised: 25,
    progress: 100,
    donors: 104,
    status: 'completed',
    statusText: '已完成',
    startDate: '2022-11-01',
    endDate: '2023-04-30'
  }
])
// 我参与的项目
const Myprojects = ref([
  {
    id: 1,
    name: '乡村儿童教育计划',
    shortDescription: '为偏远地区儿童提供教育资源和学习环境改善',
    description: '该项目旨在为偏远地区的儿童提供优质的教育资源，包括建设学校、提供教材和培训教师等。通过区块链技术，捐赠者可以实时追踪资金使用情况。',
    image: 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
    goal: 50,
    raised: 32.5,
    progress: 65,
    donors: 128,
    status: 'active',
    statusText: '进行中',
    startDate: '2023-01-15',
    endDate: '2023-12-31'
  },
  {
    id: 2,
    name: '环保植树行动',
    shortDescription: '在荒漠化地区种植树木，改善生态环境',
    description: '该项目计划在西北荒漠化地区种植10万棵树，改善当地生态环境，防止土地进一步沙漠化。每棵树的位置和生长情况都将记录在区块链上。',
    image: 'https://images.unsplash.com/photo-1468276311594-df7cb65d8df6?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
    goal: 30,
    raised: 18.2,
    progress: 60.6,
    donors: 76,
    status: 'active',
    statusText: '进行中',
    startDate: '2023-03-01',
    endDate: '2023-11-30'
  },
  {
    id: 3,
    name: '贫困家庭医疗援助',
    shortDescription: '为贫困家庭提供基本医疗保障和重大疾病救助',
    description: '为贫困家庭提供基本医疗保障，包括常见病治疗和重大疾病救助。所有医疗支出都将记录在区块链上，确保资金使用透明。',
    image: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
    goal: 40,
    raised: 40,
    progress: 100,
    donors: 215,
    status: 'completed',
    statusText: '已完成',
    startDate: '2022-09-01',
    endDate: '2023-02-28'
  },
])

// 查看平台特色数据
const goto = (path) =>{
  router.push({path: path})
}

// 查看项目详情
const viewProjectDetail = (project) => {
  router.push({ name: 'ProjectDetail', params: { id: project.id } })
}

// 查看我的项目
const goMyProject =() => {
  router.push('/MyProject')
}

// 查看更多项目
const HotProjects = () => {
  router.push('/HotProjects')
}

// 用户操作
const handleLogout = () => {
  // 这里可以添加退出登录的逻辑
  router.push('/')
}

const handleUser = () => {
  router.push('/user')
}
</script>

<style>

/* --- 基础样式 --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

:root {
  --primary-color: #4361ee;
  --primary-light: #e6e9ff;
  --secondary-color: #3f37c9;
  --accent-color: #4cc9f0;
  --dark-color: #1a1a2e;
  --light-color: #f8f9fa;
  --success-color: #16db65;
  --warning-color: #ffb800;
  --error-color: #ff4d4f;
  --gray-color: #6c757d;
  --light-gray: #f1f3f5;
  --border-radius: 12px;
  --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #f5f7fa;
  color: var(--dark-color);
  line-height: 1.6;
}

/* --- 页面容器 --- */
.home-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- 头部样式 --- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0;
}

.user-actions {
  display: flex;
  gap: 15px;
}

/* --- 按钮样式 --- */
button {
  cursor: pointer;
  transition: var(--transition);
  border: none;
  outline: none;
  font-family: 'Poppins', sans-serif;
}

.user-button, .logout-button, .more-projects {
  padding: 10px 20px;
  border-radius: var(--border-radius);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--box-shadow);
}

.user-button {
  background-color: var(--primary-color);
  color: white;
}

.user-button:hover {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
}

.logout-button {
  background-color: var(--error-color);
  color: white;
}

.logout-button:hover {
  background-color: #e63946;
  transform: translateY(-2px);
}

.more-projects {
  background-color: white;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.more-projects:hover {
  background-color: var(--primary-light);
  transform: translateY(-2px);
}

/* --- 欢迎区域 --- */
.welcome-section {
  margin-bottom: 50px;
  text-align: center;
}

.welcome-animation p {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 10px;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.subtitle {
  font-size: 1.2rem;
  color: var(--gray-color);
  font-weight: 400;
}

/* --- 平台特色 --- */
.platform-features {
  margin-bottom: 60px;
}

.section-title {
  font-size: 1.8rem;
  margin-bottom: 30px;
  color: var(--dark-color);
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 50px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  border-radius: 2px;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.card {
  background: white;
  border-radius: var(--border-radius);
  padding: 30px;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
  text-align: center;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.icon-container {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(67, 97, 238, 0.1), rgba(76, 201, 240, 0.1));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  font-size: 30px;
  color: var(--primary-color);
  transition: var(--transition);
}

.card:hover .icon-container {
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: white;
}

.card h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
  color: var(--dark-color);
}

.card p {
  color: var(--gray-color);
  font-size: 1rem;
}

/* --- 项目展示 --- */
.project-section {
  margin-bottom: 60px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}

.project-card {
  background: white;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.project-image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project-card:hover .project-image {
  transform: scale(1.05);
}

.project-status {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
}

.status-active {
  background-color: var(--success-color);
}

.status-completed {
  background-color: var(--primary-color);
}

.status-upcoming {
  background-color: var(--warning-color);
}

.project-info {
  padding: 20px;
}

.project-name {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: var(--dark-color);
}

.project-description {
  color: var(--gray-color);
  margin-bottom: 15px;
  font-size: 0.95rem;
}

.project-meta {
  margin-top: 20px;
}

.progress-container {
  margin-bottom: 15px;
}

.progress-bar {
  height: 8px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  border-radius: 4px;
  margin-bottom: 5px;
  transition: width 1s ease;
}

.progress-text {
  font-size: 0.85rem;
  color: var(--gray-color);
  display: block;
}

.donors-count {
  font-size: 0.9rem;
  color: var(--gray-color);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* --- 页脚 --- */
.footer {
  margin-top: auto;
  background-color: var(--dark-color);
  color: white;
  padding: 50px 0 20px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  padding: 0 20px;
}

.footer-section {
  margin-bottom: 30px;
}

.footer-section h3 {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: white;
}

.footer-section p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}

.social-icons {
  display: flex;
  gap: 15px;
  font-size: 1.5rem;
}

.social-icons i {
  cursor: pointer;
  transition: var(--transition);
}

.social-icons i:hover {
  color: var(--accent-color);
}

.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 30px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

/* --- 响应式设计 --- */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    gap: 20px;
    padding-bottom: 30px;
  }
  
  .welcome-animation p {
    font-size: 1.8rem;
  }
  
  .feature-cards, .project-grid {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}
</style>